<template>
    <!-- 使用 ref 属性获取外层盒子的 DOM 元素 -->
    <div class="chart-container" ref="chartContainer"></div>
</template>
<script>
import * as echarts from "echarts";

// 父组件调用此组件传参格式 ：:inData='[{ value: 200, name: 'A' },{ value: 200, name: 'B' }]'
// 组件说明，饼图大小可以根据父组件的大小自适应

export default {
    props: {
        inData: {
            type: Array,
            default: () => {
                return [];
            },
        },
    },
    data() {
        return {
            chartInstance: null, // 保存 echarts 实例
        };
    },
    computed: {
        total() {
            return this.inData.reduce((sum, item) => sum + item.value, 0);
        },
    },
    mounted() {
        // 在 mounted 钩子函数中初始化图表，并添加 resize 事件监听器
        this.initChart();
        window.addEventListener("resize", this.handleResize);
    },
    beforeDestroy() {
        // 在组件销毁前，移除 resize 事件监听器
        window.removeEventListener("resize", this.handleResize);
    },
    methods: {
        initChart() {
            // 获取外层盒子的 DOM 元素
            const chartContainer = this.$refs.chartContainer;
            // 初始化 echarts 实例
            const chartInstance = echarts.init(chartContainer);

            // 配置图表
            chartInstance.setOption({
                // 图例
                legend: {
                    bottom: 1,
                    padding: 24,
                    icon: "circle",
                    left: "center",
                },
                // 饼图中间文本// data: this.inData,
                graphic: {
                    // 添加一个包含文本的元素组
                    elements: [
                        {
                            type: "rect",
                            left: "center",
                            top: "center",
                            shape: {
                                width: 100,
                                height: 50,
                            },
                            style: {
                                fill: "#fff",
                            },
                        },
                        {
                            type: "text",
                            left: "center",
                            top: "22%",
                            style: {
                                text: "总数",
                                fontSize: 16,
                            },
                        },
                        {
                            type: "text",
                            left: "center",
                            top: "35%",
                            style: {
                                text: this.total,
                                fontSize: 12,
                            },
                        },
                    ],
                },

                series: [
                    {
                        type: "pie",
                        radius: ["35%", "45%"],
                        center: ["50%", "30%"],
                        itemStyle: {
                            borderRadius: 2,
                            borderColor: "#fff",
                        },
                        //引线信息
                        label: {
                            show: false,
                            position: "outside",

                            formatter: function (params) {
                                return params.value;
                            },
                            emphasis: {
                                show: true,
                            },
                        },
                        // 引线配置
                        labelLine: {
                            show: false,
                            position: "center",
                            normal: {
                                show: true,
                                length: 10,
                                length2: 3,
                            },
                            emphasis: {
                                show: true,
                            },
                        },
                        data: this.inData,
                    },
                    {
                        type: "pie",
                        radius: ["30%", "35%"],
                        center: ["50%", "30%"],
                    },
                ],
                grid: {
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    containLabel: true,
                },
            });

            // 将 echarts 实例保存到 data 中，以便后面可以使用 chartInstance.resize() 方法调整图表大小
            this.chartInstance = chartInstance;

            // 添加 resize 事件监听器
            window.addEventListener("resize", this.handleResize);
        },
        handleResize() {
            // 当浏览器窗口大小改变时，调用 chartInstance.resize() 方法来调整图表大小
            if (this.chartInstance) {
                this.chartInstance.resize();
            }
        },
    },
};
</script>
<style>
/* 设置外层盒子的大小 */
.chart-container {
    width: 100%;
    height: 100%;
    border: 1px solid #a53030;
}
</style>
